<template>
  <div class="applet-baseconfig-container">
    <!-- 表单 -->
    <el-row v-if="showform">
      <el-col :span="6"><div style="color:#fff">1</div></el-col>
      <el-col :span="12">
        <el-form :model="baseConfig" label-width="100px">
          <el-form-item label="APPID">
            <el-input v-model="baseConfig.app_id" placeholder="请输入" size="small" style="max-width:70%"></el-input>
          </el-form-item>
          <el-form-item label="SECRET">
            <el-input v-model="baseConfig.secret" placeholder="请输入" size="small" style="max-width:70%"></el-input>
          </el-form-item>
          <div v-if="baseConfig.wx_pay_type === '1'">
            <el-form-item label="商户号">
              <el-input v-model="baseConfig.wx.mch_id" @input="input_change()" placeholder="请输入" size="small" style="max-width:70%"></el-input>
            </el-form-item>
            <el-form-item label="密钥">
              <el-input v-model="baseConfig.wx.pay_key" @input="input_change()" placeholder="请输入" size="small" style="max-width:70%"></el-input>
            </el-form-item>
            <el-form-item label="证书CERT">
              <el-upload style="display:inline-block"
                :auto-upload="false"
                list-type="text"
                action="#"
                ref="upload"
                :on-change="getFileCert">
                <el-button type="primary" size="mini" slot="trigger" style="margin-left:15px">
                  <span>选择文件</span>
                </el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="证书KEY">
              <el-upload style="display:inline-block"
                :auto-upload="false"
                list-type="text"
                action="#"
                ref="upload"
                :on-change="getFileKey">
                <el-button type="primary" size="mini" slot="trigger" style="margin-left:15px">
                  <span>选择文件</span>
                </el-button>
              </el-upload>
            </el-form-item>
          </div>
          <div v-else>
            <el-form-item label="商户号">
              <el-input v-model="baseConfig.saobei.merchant_no" @input="input_change()" placeholder="请输入" size="small" style="max-width:70%"></el-input>
            </el-form-item>
            <el-form-item label="终端号">
              <el-input v-model="baseConfig.saobei.terminal_id" @input="input_change()" placeholder="请输入" size="small" style="max-width:70%"></el-input>
            </el-form-item>
            <el-form-item label="令牌">
              <el-input v-model="baseConfig.saobei.saobei_access_token" @input="input_change()" placeholder="请输入" size="small" style="max-width:70%"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="支付方式">
            <el-radio-group v-model="baseConfig.wx_pay_type">
              <el-radio label="1">微信支付</el-radio>
              <el-radio label="2">微信支付服务商</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6"><div style="color:#fff">1</div></el-col>
    </el-row>

    <div style="text-align:center;margin-top:10px">
      <el-button type="primary" size="small" style="padding:8px 30px;" @click="submit">保 存</el-button>
    </div>


  </div>
</template>

<script>
import { getBaseConfig, putBaseConfig } from '@/api/applet'
import { imageToBase64 } from '@/utils/comm'

export default {
  name: 'AppletBaseConfig',
  data() {
    return {
      baseConfig: {
        app_id: '',
        secret: '',
        wx_pay_type: '',
        wx: {
          mch_id: '',
          pay_key: '',
          cert_path: '',
          key_path: ''
        },
        saobei: {
          merchant_no: '',
          terminal_id: '',
          saobei_access_token: '',
        }
      },
      showform: false,
      test: '123'
    }
  },
  mounted() {
    this.getBaseConfig();
  },
  methods: {
    /**
     * 修改小程序基础配置
     */
    submit() {
      // const params = this.baseConfig.wx_pay_type === '1' ?
      // {
      //   key: this.$store.state.app.activeApp.saa_key,
      //   app_id: this.baseConfig.app_id,
      //   secret: this.baseConfig.secret,
      //   mch_id: this.baseConfig.mch_id,
      //   pay_key: this.baseConfig.pay_key,
      //   config_type: this.baseConfig.config_type,
      //   wx_pay_type: this.baseConfig.wx_pay_type,
      //   cert_path: '',
      //   key_path: ''
      // }
      // :
      // {
      //   key: this.$store.state.app.activeApp.saa_key,
      //   app_id: this.baseConfig.app_id,
      //   secret: this.baseConfig.secret,
      //   config_type: this.baseConfig.config_type,
      //   wx_pay_type: this.baseConfig.wx_pay_type,
      //   merchant_no: this.baseConfig.merchant_no,
      //   saobei_access_token: this.baseConfig.saobei_access_token,
      //   terminal_id: this.baseConfig.terminal_id,
      //   cert_path: this.baseConfig.cert_path,
      //   key_path: this.baseConfig.key_path
      // }

      this.baseConfig.key = this.$store.state.app.activeApp.saa_key;
      putBaseConfig(this.baseConfig).then(res => {
        if(res.status === 200) {
          this.$message.success('修改成功！');
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 获取小程序基础配置
     */
    getBaseConfig() {
      getBaseConfig({key: this.$store.state.app.activeApp.saa_key}).then(res => {
        if(res.status === 200) {
          const data = res.data;
          this.baseConfig = {
            app_id: data.app_id,
            secret: data.secret,
            wx_pay_type: data.wx_pay_type,
            wx: {
              mch_id: data.wx.mch_id,
              pay_key: data.wx.pay_key,
              cert_path: '',
              key_path: '',
            },
            saobei: {
              merchant_no: data.saobei.merchant_no,
              terminal_id: data.saobei.terminal_id,
              saobei_access_token: data.saobei.saobei_access_token,
            }
          }
          console.log(this.baseConfig)
          this.showform = true;
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 上传cert
     */
    getFileCert(data) {
      const that = this;
      if (window.FileReader) {
        var reader = new FileReader();
        reader.readAsDataURL(data.raw);
        reader.onloadend = function (e) {
          that.baseConfig.wx.cert_path =  e.target.result;
        };
      }
    },
    /**
     * 上传key
     */
    getFileKey(data) {
      const that = this;
      if (window.FileReader) {
        var reader = new FileReader();
        reader.readAsDataURL(data.raw);
        reader.onloadend = function (e) {
          that.baseConfig.wx.key_path =  e.target.result;
        };
      }
    },
    input_change() {
      this.$forceUpdate()
    },
  },
}
</script>

<style lang="scss" scoped>
.applet-baseconfig-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
}
.baseconfig-title{
  margin-top: 20px;
  text-align: center;
  &-button{
    padding: 15px 0;
  }
}
</style>
